// 我的试卷页面
<template>
	<div id="myExam">
		<div class="title">我的考试</div>
		<div class="wrapper">
			<ul class="top">
				<li class="order">考试列表</li>
				<li id="searchdiv">
					<el-input placeholder="考试名称" v-model="input">
						<el-button @click="search()" slot="append" icon="el-icon-search"></el-button>
					</el-input>
				</li>
			</ul>
			<ul class="paper" v-loading="loading">
				<li class="item" v-for="(item,index) in pagination.records" :key="index">
					<h4>{{item.examName}}</h4>
					<el-button v-if="item.compareTime == 0" >考试未开始</el-button>
					<el-button v-if="item.compareTime == 1" @click="toExamMsg(item)">开始考试</el-button>
					<el-button v-if="item.compareTime == 2">考试迟到</el-button>
					<el-button v-if="item.compareTime == 3">考试已结束</el-button>
					<p class="name">开始时间:{{item.examBegin}}</p>
					<div class="info">
						<!-- <i class="el-icon-loading"></i><span>{{item.examDate.substr(0,10)}}</span> -->
						<i class="iconfont icon-icon-time"></i><span v-if="item.examTime != null">限时{{item.examTime}}分钟</span>
						<i class="iconfont icon-fenshu"></i><span>满分{{item.exampaper.count}}分</span>
					</div>

					<div class="info">
						<!-- <i class="el-icon-loading"></i><span>{{item.examDate.substr(0,10)}}</span> -->
						<span>课程名:{{item.exampaper.course.courseName}}</span>
						<span>出卷人:{{item.exampaper.course.user.userName}}</span>
					</div>
				</li>
			</ul>
			<div class="pagination">
				<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagination.current"
				 :page-sizes="[6, 10, 20, 40]" :page-size="pagination.size" layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
				</el-pagination>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		// name: 'myExam'
		data() {
			return {
				loading: false,
				key: null, //搜索关键字
				allExam: null, //所有考试信息
				pagination: { //分页后的考试信息
					current: 1, //当前页
					total: null, //记录条数
					size: 6 //每页条数
				},
				input:""
			}
		},
		created() {
			this.getExamInfo()
			this.loading = true
		},
		methods: {
			//获取当前所有考试信息
			getExamInfo() {
        let studentId = this.$cookies.get("cid")
				this.$axios('/api/getExamsByUserId', {
					params: {
						keywords:"",
						studentId: studentId,
						page: this.pagination.current,
						limit: this.pagination.size
					}
				}).then(res => {
					this.pagination = res.data
					this.loading = false
					console.log(this.pagination)
				}).catch(error => {
					console.log(error)
				})
			},
			//改变当前记录条数
			handleSizeChange(val) {
				this.pagination.size = val
				this.getExamInfo()
			},
			//改变当前页码，重新发送请求
			handleCurrentChange(val) {
				this.pagination.current = val
				this.getExamInfo()
			},
			//搜索试卷
			search() {
        let studentId = this.$cookies.get("cid")
				this.$axios('/api/getExamsByUserId', {
					params: {
						keywords:this.input,
						studentId: studentId,
						page: this.pagination.current,
						limit: this.pagination.size
					}
				}).then(res => {
					this.pagination = res.data
					this.loading = false
					console.log(this.pagination)
				}).catch(error => {
					console.log(error)
				})
			},
			//跳转到试卷详情页
			toExamMsg(exam) {
        let studentId = this.$cookies.get("cid")
				//添加成绩
				this.$axios('/api/addScore/'+studentId+"/"+exam.examId).then(res => {
					console.log(res.data)
					if (res.data.code == 200) {
						this.$router.push({
							path: '/answer',
							query: {
								exam: exam
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pagination {
		padding: 20px 0px 30px 0px;

		.el-pagination {
			display: flex;
			justify-content: center;
		}
	}

	.paper {
		h4 {
			cursor: pointer;
		}
	}

	.paper .item a {
		color: #000;
	}

	.wrapper .top .order {
		cursor: pointer;
	}

	.wrapper .top .order:hover {
		color: #0195ff;
		border-bottom: 2px solid #0195ff;
	}

	.wrapper .top .order:visited {
		color: #0195ff;
		border-bottom: 2px solid #0195ff;
	}

	.item .info i {
		margin-right: 5px;
		color: #0195ff;
	}

	.item .info span {
		margin-right: 14px;
	}

	.paper .item {
		width: 380px;
		border-radius: 4px;
		padding: 20px 30px;
		border: 1px solid #eee;
		box-shadow: 0 0 4px 2px rgba(217, 222, 234, 0.3);
		transition: all 0.6s ease;
	}

	.paper .item:hover {
		box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45);
		transform: scale(1.03);
	}

	.paper .item .info {
		font-size: 14px;
		color: #88949b;
	}

	.paper .item .name {
		font-size: 14px;
		color: #88949b;
	}

	.paper * {
		margin: 20px 0;
	}

	.wrapper .paper {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.top .el-icon-search {
		position: absolute;
		right: 10px;
		top: 10px;
	}

	.top .icon {
		position: relative;
	}

	.wrapper .top {
		border-bottom: 1px solid #eee;
		margin-bottom: 20px;
	}

	#myExam .search-li {
		margin-left: auto;
	}

	.top .search-li {
		margin-left: auto;
	}

	.top li {
		display: flex;
		align-items: center;
	}

	.top .search {
		margin-left: auto;
		padding: 10px;
		border-radius: 4px;
		border: 1px solid #eee;
		box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
		transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
	}

	.top .search:hover {
		color: #0195ff;
		border-color: #0195ff;
	}

	.wrapper .top {
		display: flex;
	}

	.wrapper .top li {
		margin: 20px;
	}

	#myExam {
		width: 980px;
		margin: 0 auto;
	}

	#myExam .title {
		margin: 20px;
	}

	#myExam .wrapper {
		background-color: #fff;
	}

	#searchdiv {
		width: 250px;
		display: inline-block;
		margin-left: 60%;
		margin-bottom: 17px;
	}
</style>
